<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../docs/image3D.png">
    <script src="../../build/image3D.js"></script>
    <title>纹理 - 二维 | 测试</title>

    <!-- 顶点着色器 -->
    <script type='x-shader/x-vertex' id='vs'>
        attribute vec4 a_position;
        attribute vec2 a_textcoord;
        varying vec2 v_textcoord;
        void main(){
            gl_Position=a_position;
            v_textcoord=a_textcoord;
        }
    </script>

    <!-- 片段着色器 -->
    <script type='x-shader/x-fragment' id='fs'>
        precision mediump float;
        uniform sampler2D u_sampler;
        varying vec2 v_textcoord;
        void main(){
            gl_FragColor=texture2D(u_sampler,v_textcoord);
        }
    </script>

</head>

<body>

    <h2>
        Tips:(请用服务器访问)你应该看见一张图片！
    </h2>

    <canvas width=400 height=300>非常抱歉，您的浏览器不支持canvas!</canvas>

    <script>

        var core = image3D.core(document.getElementsByTagName('canvas')[0]);

        // 启用着色器
        core.shader(
            document.getElementById('vs').innerHTML,
            document.getElementById('fs').innerHTML
        );

        // 获取画笔
        var painter = core.painter();

        // 数据
        var data = new Float32Array([
            // 顶点坐标2，纹理坐标2
            -1.0, 1.0, 0.0, 0.0,
            -1.0, -1.0, 0.0, 1.0,
            1.0, 1.0, 1.0, 0.0,
            1.0, -1.0, 1.0, 1.0
        ]);

        // 初始化缓冲区
        var buffer = core.buffer()
            // 数据写入缓冲区
            .write(data)
            // 写入缓冲区的数据分配
            .use('a_position', 2, 4, 0)
            .use('a_textcoord', 2, 4, 2);

        // 创建纹理对象
        var texture = core.texture('2d',1);

        var image = new Image();
        image.onload = function () {

            // 绘制图片
            texture.useImage(image);
            core.setUniform1i('u_sampler', 1);
            painter.stripTriangles(0, 4);

        };
        image.src = '../assets/flower-story.jpg';

    </script>

</body>

</html>
